<template>
    <div class="login-box">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
            <el-image class="logo" :src="require('@/assets/logo.png')" fit="cover" :lazy="true"></el-image>
            <el-row>
                <el-col :span="12">
                    <el-image :src="require('@/assets/mall-logo.png')" fit="cover" :lazy="true"></el-image>

                </el-col>
                <el-col :span="12">
                    <!-- 
                        element-ui 的表单校验 涉及到两个 el 组件，三个属性，两个对象变量
                            + 涉及到的组件 el-form ，el-form-item
                            + 三个属性
                                - el-form 组件的 model、rules 属性
                                - el-form-item 组件的 prop 属性
                            + 两个对象
                                - 表单的记录数据对象
                                - 校验规则对象
                        
                        1. 将表单中需要被校验的数据记录与数据对象中，并以属性取值的方式提供给 el-form 的 model 属性
                        2. 通过对象属性名匹配规则，提供校验对象的定义
                        3. 校验规则对象的定义配置语法 参考 async-validator 
                        4. 通过对象属性名匹配规则，将校验信息指定到对应的 el-form-item 页面范围中


                        如果逻辑代码中需要完成检验判断，涉及一个 el 组件一个属性和一个组件公开方法
                            + 涉及组件 el-form
                            + 涉及属性 el-form 的 ref 属性定义
                            + 涉及公开方法 el-form 的 validate
                     -->
                    <el-form :model="loginUser" :rules="userRules" ref="loginForm">
                        <h4 class="title">网博商城后台管理系统</h4>
                        <el-form-item prop="username">
                            <el-input v-model="loginUser.username" prefix-icon="User" size="large" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginUser.password" show-password prefix-icon="Lock" placeholder="请输入密码" type="password" size="large" />
                        </el-form-item>
                        <el-form-item class="button">
                            <el-button type="primary" size="large" @click="doLogin()">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import userRules from "@/rules/userRules.js";
import usersApi from "@/api/users.js";
export default {
    data() {
        return {
            loginUser: {
                username:"",
                password:""
            },
            userRules
            // userRules:{
            //     username:[
            //         { required:true, message: '登录名不能为空', trigger: 'blur' },
            //         { min:4, message: '登录名长度必须大于3', trigger: 'blur' }
            //     ],
            //     password:[
            //         { required:true, message: '登录密码不能为空', trigger: 'blur' },
            //     ],
            // }
        }
    },
    methods: {
        // doLogin() {
        //     // 
        //     this.$refs.loginForm.validate()
        //         .then(()=>{
        //             this.$router.push({
        //                 name:"home"
        //             })
        //         })
        // }
        async doLogin() {
            await this.$refs.loginForm.validate()
            // ajax
            let user = await usersApi.loginRquest(this.loginUser)
            if(user!==null){
                sessionStorage.setItem("user", JSON.stringify(user) )
                sessionStorage.setItem("token", user.token )

                // let users =  await usersApi.findUserList({
                //     pagenum:1,
                //     pagesize:6
                // })
                // console.log( users ) 
                this.$router.push({
                    name:"home"
                })
                this.$message.success(`登录成功,欢迎:${user.username}`)
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.login-box {
    height: 100%;
    background-color: var(--vt-c-indigo);
}

.el-card {
    font-size: 0px;
    width: 800px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0%);
    overflow: unset;
}

.logo {
    width: 180px;
    height: 180px;
    position: absolute;
    top: -100px;
    left: 50%;
    z-index: 2;
    background-color: var(--vt-c-white-soft);
    border: 8px solid var(--vt-c-indigo);
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
    transform: translate(-50%, 0px);
}

.el-image {
    height: 400;
}

.el-form {
    padding: 30px;
    padding-top: 40px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .el-form-item {
        margin-bottom: 30px;
    }

    .button {
        margin-bottom: 0px;
    }

    .el-button {
        width: 100%;
    }
}

.title {
    font-size: 20px;
    margin: 24px;
    text-align: center;
}
</style>